---
image: /generated/articles-docs-videos-index.png
title: Embedding videos into Remotion
sidebar_label: Adding a video
crumb: 'How To'
---

You can embed existing videos into Remotion by using the [`<OffthreadVideo>`](/docs/offthreadvideo) component.

```tsx twoslash
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />;
};
```

## Using a local file

Put a file into the [`public` folder](/docs/terminology/public-dir) and reference it using [`staticFile()`](/docs/staticfile).

```tsx twoslash
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} />;
};
```

## Trimming

By using the [`trimBefore`](/docs/offthreadvideo#trimbefore) prop, you can remove the first few seconds of the video.  
In the example below, the first two seconds of the video are skipped (assuming a composition FPS of 30).

```tsx twoslash
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} trimBefore={60} />;
};
```

Similarly, you can use [`trimAfter`](/docs/offthreadvideo#trimafter) to trim the end of the video.

```tsx twoslash
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} trimBefore={60} trimAfter={120} />;
};
```

## Delaying

Use the [`<Sequence>`](/docs/sequence) component to delay the appearance of a video.  
In the example below, the video will start playing at frame 60.

```tsx twoslash
import React from 'react';
import {OffthreadVideo, staticFile, Sequence} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <Sequence from={60}>
      <OffthreadVideo src={staticFile('video.mp4')} />
    </Sequence>
  );
};
```

## Size and Position

You can size and position the video using CSS.  
You'll find the properties `width`, `height`, `position`, `left`, `top`, `right`, `bottom`, `margin`, `aspectRatio` and `objectFit` useful.

```tsx twoslash
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return (
    <OffthreadVideo
      src={staticFile('video.mp4')}
      style={{
        width: 640,
        height: 360,
        position: 'absolute',
        top: 100,
        left: 100,
      }}
    />
  );
};
```

## Volume

You can set the volume of the video using the [`volume`](/docs/offthreadvideo#volume) prop.

```tsx twoslash
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} volume={0.5} />;
};
```

You can also mute a video using the [`muted`](/docs/offthreadvideo#muted) prop.

```tsx twoslash
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} muted />;
};
```

See [Using Audio](/docs/audio/volume) for more ways you can control volume.

## Speed

You can use the [`playbackRate`](/docs/offthreadvideo#playbackrate) prop to change the speed of the video.

```tsx twoslash
import React from 'react';
import {OffthreadVideo, staticFile} from 'remotion';

export const MyComp: React.FC = () => {
  return <OffthreadVideo src={staticFile('video.mp4')} playbackRate={2} />;
};
```

This only works if the speed is constant. See also: [Changing the speed of a video over time](/docs/miscellaneous/snippets/accelerated-video).

## Looping

See: [Looping an `<OffthreadVideo>`](/docs/offthreadvideo#looping-a-offthreadvideo)

## GIFs

See: [Using GIFs](/docs/gif)

## See also

- [`<OffthreadVideo>`](/docs/offthreadvideo)
- [Using Audio](/docs/using-audio)
